<template>   
  <div class="layout-container" @click="handleLayoutClick">     
    <header class="header" :class="{ 'blurred': isMenuOpen }">       
      <div class="header-left">         
        <img src="../assets/1.svg" class="avatar" @click.stop="toggleSideMenu" />         
        <h1 class="title">{{ pageTitle }}</h1>       
      </div>       
      <div class="header-right">         
        <a class="menu-link" @click="toggleMenu">
          <img src="../assets/icons/wallet.svg" alt="菜单" class="menu-icon" />
        </a>      
      </div>     
    </header>

    <main class="main-content" :class="{ 'blurred': isMenuOpen }">       
      <component :is="currentComponent" />   
    </main>     

    <nav class="bottom-nav">
      <a class="nav-link" 
         @click="navigateTo('DelegationList')"
         :class="{ 'active': currentRoute === 'DelegationList' }">
        <img src="../assets/icons/delegation.svg" 
             alt="列表" />
        <span>列表</span>
      </a>
      
      <a class="nav-link publish-link" @click="navigateTo('Publish')">
        <img src="../assets/1.svg" alt="发布" class="publish-icon" />
      </a>
      
      <a class="nav-link" 
         @click="navigateTo('Message')"
         :class="{ 'active': currentRoute === 'Message' }">
        <img src="../assets/icons/message.svg" 
             alt="消息" />
        <span>消息</span>
      </a>
    </nav>

    <Transition name="slide">       
      <SideMenu v-if="isMenuOpen" />     
    </Transition>     
  </div> 
</template>  

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import SideMenu from '../components/SideMenu.vue'
import DelegationList from '../components/DelegationList.vue'
import MessageList from '../components/MessageList.vue'

const isMenuOpen = ref(false)
const userAvatar = ref('../assets/1.svg')
const router = useRouter()
const route = useRoute()
const currentRoute = ref(route.name)

// 根据路由名称计算当前应该显示的组件
const currentComponent = computed(() => {
  switch (currentRoute.value) {
    case 'Message':
      return MessageList
    case 'DelegationList':
    default:
      return DelegationList
  }
})

// 根据路由名称计算页面标题
const pageTitle = computed(() => {
  switch (currentRoute.value) {
    case 'Message':
      return '消息'
    case 'DelegationList':
      return '委托列表'
    case 'Publish':
      return '发布委托'
    default:
      return '委托列表'
  }
})

const toggleSideMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}

const handleLayoutClick = (event) => {
  if (isMenuOpen.value) {
    isMenuOpen.value = false
  }
}

const toggleMenu = () => {
  // 添加菜单切换逻辑
}

const navigateTo = (routeName) => {
  currentRoute.value = routeName
  router.push({ name: routeName })
}

// 监听路由变化
router.afterEach((to) => {
  currentRoute.value = to.name
})
</script>

<style scoped>
.layout-container {
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: white;
}

.header.blurred {
  filter: blur(20px);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}

.title {
  font-size: 1.2rem;
  font-weight: 500;
  color: black;
}

.header-right {
  display: flex;
  align-items: center;
}

.menu-link {
  padding: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.menu-link:active {
  transform: scale(0.95);
}

.menu-icon {
  width: 24px;
  height: 24px;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  transition: filter 0.3s ease;
  padding-bottom: 70px;
}

.main-content.blurred {
  filter: blur(20px);
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: white;
  border-top: 1px solid #eee;
  padding: 8px 0;
  height: 56px;
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #666;
  font-size: 12px;
  gap: 4px;
  transition: all 0.2s;
  position: relative;
  padding: 4px 12px;
}

.nav-link:active {
  transform: scale(0.95);
}

/* 点击反馈效果 */
.nav-link::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  opacity: 0;
  border-radius: 8px;
  transition: opacity 0.2s;
}

.nav-link:active::after {
  opacity: 0.1;
}

.nav-link img {
  width: 24px;
  height: 24px;
  transition: transform 0.2s;
}

.nav-link span {
  margin-top: 2px;
  transition: color 0.2s;
}

.nav-link.active {
  color: #3b82f6;
}

.nav-link.active img {
  transform: scale(1.1);
}

.publish-link {
  margin-top: -32px;
}

.publish-icon {
  width: 48px !important;
  height: 48px !important;
  background: #3b82f6;
  border-radius: 50%;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.publish-link:active .publish-icon {
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.5);
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter-from,
.slide-leave-to {
  transform: translateX(-100%);
}
</style>